<template>
  <div ref="chartDom" style="width: 100%; height: 100%; min-height: 18.5rem"></div>
</template>

<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/gauge');

export default {
  props: {
    ringValue: {
      type: Object,
      default: 0.66,
    }
  },
  data() {
    return {
      myChart: null,
      option: {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '70%'],
            radius: '100%',
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 40,
                color: [
                  [0.1, new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [{
                      offset: 0,
                      color: '#ff574e'
                    }, {
                      offset: 1,
                      color: '#ff64c9'
                    }]
                  )],
                  [0.25, new echarts.graphic.LinearGradient(
                    0, 1, 1, 0,
                    [{
                      offset: 0.5,
                      color: '#ff64c9'
                    }, {
                      offset: 1,
                      color: '#c666ff'
                    }]
                  )],
                  [0.55, new echarts.graphic.LinearGradient(
                    0, 0, 1, 1,
                    [{
                      offset: 0.37,
                      color: '#cd65f3'
                    }, {
                      offset: 0.8,
                      color: '#5d95ff'
                    }]
                  )],
                  [0.85, new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                      offset: 0.3,
                      color: '#5d95ff'
                    }, {
                      offset: 0.8,
                      color: '#6FEFC6'
                    }]
                  )],
                  [1, new echarts.graphic.LinearGradient(
                    0, 0, 1, 1,
                    [{
                      offset: 0.1,
                      color: '#6ee5ff'
                    }, {
                      offset: 1,
                      color: '#70ff70'
                    }]
                  )]
                ],
              },
              roundCap: true
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '20%',
              width: 20,
              offsetCenter: [0, '-50%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 0,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 0,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: '#595959',
              fontSize: 20,
              fontWeight: 'bold',
              distance: -40,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 0.875) {
                  return 'A';
                } else if (value === 0.625) {
                  return 'B';
                } else if (value === 0.375) {
                  return 'C';
                } else if (value === 0.125) {
                  return 'D';
                } else if (value === 0) {
                  return 'E';
                }
              }
            },
            title: {
              offsetCenter: [0, '0%'],
              fontSize: 20
            },
            detail: {
              fontSize: 40,
              offsetCenter: [0, '-20%'],
              valueAnimation: true,
              formatter: (value) => {
                return Math.round(value * 100) + '';
              },
              color: 'inherit'
            },
            data: [
              {
                value: this.ringValue,
                name: '等级评定'
              }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chartDom);
    this.myChart.setOption(this.option);
  }
};
</script>
